<template>
    <div class="register-container">
        <el-form :model="ruleForm2" :rules="rule2" status-icon ref="ruleForm2" label-position="left" label-witdh="0px"
                 class="register-page ruleForm">
            <h3 class="title">
                公司注册
            </h3>
            <el-form-item prop="name">
                <el-input type="text" v-model="ruleForm2.name" auto-complete="off" placeholder="公司名称"></el-input>
            </el-form-item>
            <el-form-item prop="nick_name">
                <el-input type="text" v-model="ruleForm2.nick_name" auto-complete="off" placeholder="管理员名称"></el-input>
            </el-form-item>
            <el-form-item prop="email">
                <el-input type="text" v-model="ruleForm2.email" auto-complete="off" placeholder="管理员邮箱"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="ruleForm2.password" auto-complete="off"
                          placeholder="登陆密码"></el-input>
            </el-form-item>
            <el-form-item prop="passwords">
                <el-input type="password" v-model="ruleForm2.passwords" auto-complete="off"
                          placeholder="确认密码"></el-input>
            </el-form-item>
            <el-form-item prop="phone">
                <el-input type="text" v-model="ruleForm2.phone" auto-complete="off" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input type="text" v-model="ruleForm2.code" auto-complete="off" placeholder="手机验证码">
                    <el-button slot="append" @click="requestCode" :disabled="codeDisabled">{{codeMsg}}</el-button>
                </el-input>
            </el-form-item>
            <el-form-item style="width: 100%;">
                <el-button type="primary" style="width: 100%;" @click="handlerSubmit" :loading="clicking">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
  export default {
    name: "Register",
    data() {
      return {
        clicking: false,
        codeDisabled: false,
        codeMsg: '获取短信验证码',
        codeCount: 60,
        codeKey: '',
        ruleForm2: {
          name: null,
          phone: null,
          nick_name: null,
          email: null,
          code: null,
          password: null,
          passwords: null
        },
        rule2: {
          name: [{required: true, message: '请输入公司名称', trigger: 'blur'}],
          phone: [{required: true, message: '请输入手机号码', trigger: 'blur'}],
          code: [{required: true, message: '请输入手机验证码', trigger: 'blur'}],
          nick_name: [{required: true, message: '请输入管理员名称', trigger: 'blur'}],
          email: [{required: true, message: '请输入管理员邮箱', trigger: 'blur'}],
          password: [{required: true, message: '请输入登陆密码', trigger: 'blur'}],
          passwords: [{required: true, message: '请输入确认密码', trigger: 'blur'}],
        },
      }
    },
    methods: {
      handlerSubmit() {
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {
            if (this.ruleForm2.password !== this.ruleForm2.passwords) {
              this.$message.error({
                message: '登陆密码与确认密码不一致',
                offset: 100,
              })
              return false
            }
            let params = this.ruleForm2
            params.code_key = this.codeKey
            console.log(params)
            this.$http.post('/company/register', this.$qs.stringify(params))
              .then(response => {
                if (response.data.state === 1) {
                  this.$message.success({
                    message: "注册成功",
                    offset: 100
                  })
                  this.$router.push({path: '/login'})
                  return true
                }
                this.$message.error({
                  message: response.data.msg,
                  offset: 100
                })
                return false;
              })
              .catch(err => {
                console.log(err)
              })
          }
        })
      },
      refreshCodeMsg() {
        if (this.codeCount === 0) {
          this.codeDisabled = false
          this.codeMsg = '重新发送'
        } else {
          this.codeMsg = '重新发送' + this.codeCount + 'S'
          this.codeCount--
          setTimeout(() => {
            this.refreshCodeMsg()
          }, 1000)
        }
      },
      requestCode() {
        if (!(/^1[3456789]\d{9}$/.test(this.ruleForm2.phone))) {
          this.$message.error({
            message: '请输入正确的手机号码',
            offset: 100,
          })
          return false
        }
        this.$http.post('/code', this.$qs.stringify({scene: 'register', phone: this.ruleForm2.phone}))
          .then(response => {
            if (response.data.state === 1) {
              this.$message.success({
                message: '短信发送成功',
                offset: 100,
              })
              this.codeKey = response.data.data.key
              this.codeCount = 60
              this.codeDisabled = true
              this.refreshCodeMsg()
            } else {
              this.$message.error({
                message: response.data.msg,
                offset: 100,
              })
            }
          })
          .catch(function (err) {
            console.log(err)
          })
      }
    }
  }
</script>

<style scoped>
    .register-container {
        width: 100%;
        height: 100%;
    }

    .register-page {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
</style>